<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :isIndex="true"
      :isPagination="true"
      :tableData="tableData"
      :height="tableData.length * 107 + 45"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="1000px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        deviceId: "",
        deviceType: "",
        agent: "",
        saller: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "deviceId",
          placeholder: "Device Number",
          width: 150
        },
        {
          type: "select",
          prop: "deviceType",
          placeholder: "设备Type",
          width: 150,
          options: [
            {
              label: "格子柜",
              value: "1"
            },
            {
              label: "弹簧柜",
              value: "2"
            }
          ]
        },
        {
          type: "select",
          prop: "agent",
          placeholder: "分配Agent",
          width: 150,
          options: [
            {
              label: "A代理",
              value: "1"
            },
            {
              label: "B代理",
              value: "2"
            }
          ]
        },
        {
          type: "select",
          prop: "saller",
          placeholder: "分配商家",
          width: 150,
          options: [
            {
              label: "A商家",
              value: "1"
            },
            {
              label: "B商家",
              value: "2"
            }
          ]
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.elFormSubmit()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        }
      ],
      tableData: [
        {
          deviceId: 1,
          deviceType: "aa",
          agent: "A代理",
          saller: "B商家",
          ctime: "2020-02-02 02:02:02"
        }
      ],
      tableCols: [
        {
          label: "设备Type",
          prop: "deviceType"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "Device Number",
          prop: "deviceId"
        },
        {
          label: "分配Agent",
          prop: "agent"
        },
        {
          label: "分配商家",
          prop: "saller"
        },
        {
          label: "激活时间",
          prop: "ctime"
        },
        {
          label: "Operations",
          type: "button",
          btnList: [
            {
              label: "查看",
              type: "primary",
              // isShow: e => e.orderId == '123' ? true : false,
              handle: row => this.elFormDetail(row)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        bannerName: "",
        bannerPic: "",
        pwd: "",
        devChose: "",
        isOnline: ""
      },
      formCols: [
        {
          type: "input",
          label: "广告Name",
          width: 350,
          prop: "bannerName",
          rmblock: true,
          remark: "广告Name只是作为辨别多个广告条目之用，并不显示在广告中"
        },
        {
          type: "upload",
          label: "广告素材",
          width: 200,
          prop: "bannerPic",
          remark: "只能上传jpg/png/MP4格式文件，文件不能超过50kb",
          rmblock: true
        },
        {
          type: "select",
          label: "选择设备",
          width: 350,
          prop: "devChose",
          options: [{ name: "a", value: "A设备" }]
        },
        { type: "switch", label: "上线/下线", width: 350, prop: "isOnline" }
      ],
      formRules: {
        nickName: [
          { required: true, message: "Please Input管理员Name", trigger: "blur" }
        ],
        account: [
          { required: true, message: "Please Input登录账号", trigger: "blur" }
        ],

        pwd: [
          { required: true, message: "Please Input登录密码", trigger: "blur" }
        ],
        roleids: [
          { required: true, message: "Please Select角色", trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  components: {},
  computed: {},
  methods: {
    init() {
      let param = { ...this.searchData, ...this.tablePage };
    },
    elFormSubmit(e) {
      //查询
      console.log(e);
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      this.formData.cardId = row.cardId;
      // if (this.formCols[1].label == '登录密码') {
      //     this.formCols.splice(1, 1)
      // }

      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
